<template>
  <div class="menu">
    <a-row>
      <a-button type="primary" icon="redo" @click="getMenuList">刷新</a-button>
      <permission authority="permissions:modify">
        <a-button type="primary" icon="plus" @click="openInfo()">添加</a-button>
      </permission>
      <permission authority="permissions:delete">
        <a-button @click="deleteRows(selectedRowKeys)" type="primary" icon="delete">删除</a-button>
      </permission>
    </a-row>
    <a-row>
      <a-table :pagination="false" rowKey="id" :row-selection="rowSelection" :columns="columns" :data-source="menuList" >
        <template slot="operation" slot-scope="text, record">
          <permission authority="permissions:delete">
            <span class="text-primary pointer" @click="openInfo(record)">修改</span>
          </permission>
          <a-divider type="vertical" />
          <permission authority="permissions:delete">
            <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
          </permission>
        </template>
      </a-table>
    </a-row>
    <menu-info :menuList="menuList" :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
  </div>
</template>
<script>
import MenuInfo from './components/MenuInfo'
export default {
  name: 'menuManage',
  components: {
    MenuInfo
  },
  data() {
    return {
      menuList: [],
      infoVisible: false,
      selectedRowKeys: null,
      currentRecord: {},
      columns:  [{
          title: '权限名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '权限编码',
          dataIndex: 'code',
          key: 'code',
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate',
        },
        {
          title: '排序',
          dataIndex: 'sort',
          key: 'sort',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },]
    }
  },
  
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          this.selectedRowKeys = selectedRowKeys
        },
      };
    },
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    closeInfoModal (freshTable) {
      this.infoVisible = false
      if (freshTable) {
        this.getMenuList()
      }
    },
    openInfo (record) {
      this.currentRecord = record
      this.infoVisible = true
    },
    deleteRows (ids) {
      if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          this.$post('/sys/permissions/delete', ids).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.getMenuList()
            }
          })
        }
      })
    },
    getMenuList () {
      this.$get('/sys/permissions/tree').then(res => {
        if (res && res.returnCode === 1000) {
          this.menuList = res.dataInfo
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>